<template>
    <div>
         <el-dialog title="电影匹配" :visible.sync="matchDialogVisible" width="50%">
            <span>当前选择匹配的电影：
                <el-tag type="warning">{{movieChannel.relatedName}}</el-tag>
            </span>
            <span>
                <el-card>
                <el-row :gutter="12">
                <el-col :span="6">
                    <el-input placeholder="请输入电影名称" class="input-with-select" v-model="queryInfo.name" clearable @clear="getMovieList">
                     </el-input>
                </el-col>
                
                <el-col :span="4">
                    <el-button type="primary"  @click="getMovieList">搜索</el-button>
                </el-col>
            </el-row>
            <el-table :data="movieList" border stripe>
                <el-table-column label="id" prop="id"></el-table-column>
                <el-table-column label="电影名称" prop="name"></el-table-column>
                <el-table-column label="导演" prop="director"></el-table-column>
                <el-table-column label="演员" prop="actors"></el-table-column>
                <el-table-column label="首映日期" prop="releaseDate"></el-table-column>
                <el-table-column type="选择">
                    <template slot-scope="sc">
                        <el-radio v-model="relatedId" :label="sc.row.id" border size="small">选择</el-radio>
                    </template>
                </el-table-column>
                <!-- 分页 -->
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNo"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="matchDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveMovieMatch()">确 定</el-button>
            </span>
    </el-dialog>
    </div>
</template>
<script>
import Api from '@/api/Movie.js'
export default {
    props: {
        
    },
    data() {
        return {
            matchDialogVisible : false,
            movieChannel: {
                relatedName: '',
            },
            queryInfo: {
                name: '',
                pageNo: 1, // 页码
                pageSize: 10, // 页大小
            },
            movieList: [],
            total: 0,
            relatedId: null,
            channel: '',
            id: null
        }
    },
    methods: {
        showMatchDialog(id){
             Api.getMovieChannel({'id':id}).then(res => {
                if (res.success) {
                    this.id = id
                    this.matchDialogVisible = true
                    this.movieChannel = res.data
                    this.queryInfo.name = res.data.name
                    this.getMovieList()
                } else {
                    return this.$message.error(res.msg)
                }
            })
        },
        getMovieList() {
            Api.getMovieList(this.queryInfo).then(res => {
                if (res.success) {
                    this.movieList = res.data.records
                    this.total = res.data.total
                } else {
                    return this.$message.error('获取电影列表失败')
                }
            })
        },
        handleSizeChange(pageSize) {
            this.queryInfo.pageNo = 1
            this.queryInfo.pageSize = pageSize
            this.getMovieList()
        },
        // 监听pageNo的事件
        handleCurrentChange(pageNo) {
            this.queryInfo.pageNo = pageNo
            this.getMovieList()
        },
        saveMovieMatch() {
            console.info(this.relatedId)
            Api.setMovieChannelRelatedId({'id': this.id, 'relatedId': this.relatedId}).then(res => {
                if (res.success) {
                    this.matchDialogVisible = false
                    this.$parent.getMovieList()
                } else {
                    return this.$message.error('获取电影列表失败')
                }
            })
        }
    }
}
</script>